import { resolve } from 'path'
import type { UserConfigExport, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'
import svgLoader from "vite-svg-loader"
import { viteMockServe } from "vite-plugin-mock";

// 路径查找
const pathResolve = (dir: string): string => {
  return resolve(__dirname, '.', dir)
}

// https://vite.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  const prodMock = true;
  return {
    plugins: [
      vue(),
      ElementPlus({}),
      svgLoader(),
      viteMockServe({
        mockPath: "./mock", // 模拟接口api文件存放的文件夹
        watchFiles: true, // 将监视文件夹中的文件更改。 并实时同步到请求结果
        localEnabled: command === "serve", // 设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能
        prodEnabled: command !== "serve" && prodMock, // 设置生产环境是否启用 mock 功能
        injectCode: `
          import { setupProdMockServer } from './mockProdServer';
          setupProdMockServer();
        `, // 如果生产环境开启了mock功能，该代码会注入到injectFile对应的文件的底部，默认为main.{ts,js}
        injectFile:resolve(process.cwd(),'src/main.{ts,js}'),
        logger: true
      }),
    ],
    resolve: {
      alias: {
        '@': pathResolve('src'),
      },
    },
    css: {
      // css预处理器
      preprocessorOptions: {
        scss: {
          // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
          // 使用@use代替@import
          additionalData: `@use "@/style/var.scss" as *;`
        }
      }
    }
  }
}
